<html>
<head>
    <meta charset="UTF-8"/>
    <title>年级总成绩</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="js/jquery-3.5.0.js"></script>
    <script src="Vue/Vue.js"></script>
    <script src="Vue/axios.js"></script>
</head>
<body>
<div id="app">
    年级：<select v-model="grade" @change="getGrade()">
    <option v-for='grade in grades'>{{grade}}</option>
</select>
    考试名称：<select v-model="testType">
    <option v-for="testPaperName in testPaperNames">{{testPaperName}}</option>
</select>

    <button type="button" @click="getGradeScore">确认</button>
    <br/>

    <div id="main" style="width: 1000px;height:400px;"></div>
    <div id="weak"></div>

    <script>

        var storage = window.localStorage;
        var token = storage.getItem("token");
        var refreshToken = storage.getItem("refreshToken");


        new Vue({

            el: "#app",
            data: {
                grade: "高一",
                testType: "",
                grades: ["高一", "高二", "高三"],
                testPaperNames: [],
                schools: [],
                tatolAvgs: []
            },
            mounted() {
                axios.get(
                    "/principal/grade/TestType/" + this.grade, {
                        headers: {
                            "token": token,
                            "refreshToken": refreshToken
                        }
                    }
                ).then(res => {
                    console.log(res)
                    if (res.data.code == 200) {
                        this.testPaperNames = res.data.data;
                        this.testType = res.data.data[0];
                    }else if(res.data.code==500){
                        console.log("权限不够")
                        $("#app").html("无权限访问")
                    }else if(res.data.code == 302){
                        window.parent.location.href="login.html";
                    }

                })
            },
            methods: {
                getGrade: function () {
                    axios.get(
                        "/principal/grade/TestType/" + this.grade, {
                            headers: {
                                "token": token,
                                "refreshToken": refreshToken
                            }
                        }
                    ).then(res => {
                        if (res.data.code == 200) {
                            this.testPaperNames = res.data.data;
                            this.testType = res.data.data[0];
                        }else if(res.data.code==500){
                            console.log("权限不够")
                            $("#app").html("无权限访问")
                        }else if(res.data.code == 302){
                            window.parent.location.href="login.html";
                        }
                    })
                },
                getGradeScore: function () {

                    console.log(this.testType);
                    axios.get(
                        "/principal/grade/getAllSubjectScoreAvg/" + this.grade + "/" + this.testType, {
                            headers: {
                                "token": token,
                                "refreshToken": refreshToken
                            }
                        }
                    ).then(res => {
                        if (res.data.code == 200) {
                            console.log(res.data.data)

                            // 基于准备好的dom，初始化echarts实例
                            var myChart = echarts.init(document.getElementById('main'));

                            // 指定图表的配置项和数据
                            var option = {
                                legend: {},
                                tooltip: {},
                                dataset: {
                                    // 提供一份数据。
                                    source: res.data.data.allSubject
                                },
                                // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                                xAxis: {type: 'category'},
                                // 声明一个 Y 轴，数值轴。
                                yAxis: {},
                                // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                                series: [
                                    {type: 'bar'},
                                    {type: 'bar'},
                                    {type: 'bar'},
                                    {type: 'bar'}

                                ]
                            };

                            // 使用刚指定的配置项和数据显示图表。
                            myChart.clear();
                            myChart.setOption(option);
                            $("#weak").html("全市平均分: " + res.data.data.allSchoolScore + "<br/>本校平均分:  " + res.data.data.thisScore + "<br/>薄弱学科: " + res.data.data.weakSubject)
                        }else if(res.data.code==500){
                            console.log("权限不够")
                            $("#app").html("无权限访问")
                        }else if(res.data.code == 302){
                            window.parent.location.href="login.html";
                        }
                    })

                },

            }

        })

    </script>
</div>